import React, {useState} from "react";
import {Layout, Menu, MenuProps, theme} from "antd";
import {Outlet, useNavigate} from "react-router-dom";

type MenuItem = Required<MenuProps>['items'][number];

export const Root: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate()
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();

    const handleMenuClick: MenuProps['onClick'] = ({item, key, keyPath, domEvent}) => {
        console.log(item, key, keyPath, domEvent)
        navigate(key)
    };

    const getItem = (
        label: React.ReactNode,
        key: React.Key,
        _onClick?: MenuProps['onClick'],
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem => {
        return {
            key,
            onClick: _onClick,
            icon,
            children,
            label,
        } as MenuItem;
    }

    const items: MenuItem[] = [
        getItem('Gitee长期求star', 'https://gitee.com/wb04307201', ({item, key, keyPath, domEvent}) => {
            console.log(item, key, keyPath, domEvent)
            window.open(key, '_blank')
        }),
        getItem('Github长期求star', 'https://github.com/wb04307201', ({item, key, keyPath, domEvent}) => {
            console.log(item, key, keyPath, domEvent)
            window.open(key, '_blank')
        }),
        getItem('人员工时', '/task_order', handleMenuClick),
        getItem('考勤日历', '/person_calendar', handleMenuClick),
    ];

    return (
        <Layout style={{minHeight: '100vh'}}>
            <Layout.Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items}/>
            </Layout.Sider>
            <Layout>
                <Layout.Content style={{margin: '0 16px'}}>
                    <div
                        style={{
                            padding: 24,
                            height: '100%',
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet/>
                    </div>
                </Layout.Content>
                <Layout.Footer style={{textAlign: 'center'}}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Layout.Footer>
            </Layout>
        </Layout>
    );
};